<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <!-- 引入栏目js -->
    <script src="./js/category.js"></script>
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="./css/icon.css">
    <!-- 引入编辑器 -->
    <script src="./js/wangEditor.js"></script>
    <!-- 引入分页插件 -->
    <script src="./js/jquery.sPage.min.js"></script>
    <link rel="stylesheet" href="./css/jquery.sPage.css">
    <!-- 引入上传插件 -->
    <link rel="stylesheet" href="./css/FraUpload.css">
    <script src="./js/FraUpload.js"></script>
    <script src="./js/MD5.js"></script>
    <script src="./js/Sortable.js"></script>
    <!-- 引入moment，处理时间格式 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/1.0.0/moment.min.js"></script>


    <title>首页</title>
    <style>
        body {
            overflow-x: hidden;
        }
        .head {
            height: 65px;
            width: 100%;
            background-color: moccasin;
        }
        .head_title {
            font-size: 28px;
            font-weight: bold;
            line-height: 65px;
            margin-left: 1em;
            color: #60b2ff;
        }
        .head_welcome {
            color: #333;
            margin-top: 1.5em;
        }
        .left_nav {
            width: 160px;
            background-color: #2d3f54;
            height: 600px;
            float: left;
        }
        ul {
            padding: 0;
        }
        li {
            list-style: none;
            color: #f3f3f3;
            border-bottom: 1px solid #f3f3f3;
            text-align: center;
            line-height: 3em;
        }
        li span {
            display: inline-block;
            margin-right: .5em;
        }
        .content {
            float: right;
            width:calc(100% - 200px);
            height: 500px;
            margin: 1em;
            border-radius: 5px;
            background-color: #f2f2f2;
        }
        .icon-airudiantubiaohuizhi-zhuanqu_zixundongtai {
            font-size: 28px;
        }
        .icon-tuichu {
            font-size: 28px;
        }
    </style>
</head>
<script>
    $(function(){
        // 点击左侧导航栏切换内容区
        $("ul").on("click","li",function(){
            if($(this).text() == "文章管理") {
                $(".content").load('./pages/article.html')
            } else if($(this).text() == "栏目管理") {
                $(".content").load("./pages/category.html")
            } else if ($(this).text() == "评论管理") {
                $(".content").load("./pages/comment.html")
            } else if ($(this).text() == "用户管理") {
                $(".content").load("./pages/user.html")
            }
        })
        // 在页面加载完毕时，默认执行的事件
        $('ul li:first-child').trigger('click')
        // 背景色和颜色发生改变
        $("ul").on("mouseover","li",function(){
            $(this).css("color","#44a2fc");
            $(this).css("background","#1a2939")
        })
        $("ul").on("mouseout","li",function(){
            $(this).css("color","#f3f3f3");
            $(this).css("background","#2d3f54")
        })

        // 退出
        $("#logout").on("click",function() {
            location.href="http://127.0.0.1:5500/0.02+03-gitee/5.h5api+jquery/1-jQuery/kdzx/login.html"
        })
    })
</script>
<body>
    <div class="outer">
        <!-- 头部区域 -->
        <div class="head">
            <div class="row">
                <div class="col-9">
                    <div class="head_title"><span class="iconfont icon-airudiantubiaohuizhi-zhuanqu_zixundongtai"></span> 资讯管理系统</div>
                </div>
                <div class="col-2">
                    <div class="head_welcome">欢迎您，<span id="host"></span></div>
                </div>
                <div id="logout" class="col-1" style="margin-top: 1em;"><span class="iconfont icon-tuichu"></span></div>
            </div>
        </div>
        <!-- 左侧导航栏 -->
        <div class="left_nav">
            <ul>
                <li><span class="iconfont icon-wenzhangguanli"></span>文章管理</li>
                <li><span class="iconfont icon-lanmu"></span>栏目管理</li>
                <li><span class="iconfont icon-pinglun"></span>评论管理</li>
                <li><span class="iconfont icon-user"></span>用户管理</li>
            </ul>
        </div>
        <!-- 内容区 -->
        <div class="content">
            消息管理
        </div>
    </div>
</body>
</html>